<script setup lang='ts'>
  import { onMounted, onUpdated, reactive, ref } from 'vue';
  import { luckDrawApi } from '@/api/controller';
  import { ToastSuccess, ToastWarning, Toastloading, $router } from '@/utils/public';
  import { ElMessageBox } from 'element-plus';
  import poolForm from './poolForm.vue';
  import configForm from './configForm.vue';
  import inventory from './inventory.vue';
  const poolFormRef = ref(),
  configFormRef = ref(),
  inventoryRef = ref();
  const action = reactive({
    list:[] as any[],
  })
  const poolTypeOptions = [
    {type:1,label:'礼物池开启'},
    {type:2,label:'礼物池关闭'}
  ]
  const poolOptions = [
    {type:1,label:'公共礼物池'},
    {type:2,label:'新人礼物池'}
  ]
  const listQuery = reactive({
    pool_type:1,
    status:0,
    pool_level:0
  })
  const handleSerach = () => {
    getList();
  };
  const handleClose = (row:any = {})=>{
    const { pool_name='', id=0, status=0 } = row
    if(!status) return ToastWarning('status 参数异常')
    ElMessageBox.confirm(`确定${['','关闭礼物池','开启礼物池'][status]}：${pool_name}吗?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(async () => {
      const loading = Toastloading();
      await luckDrawApi.wishLuckSetPoolStatus({
        pool_id:id,
        pool_status:['',2,1][status]
      });
      loading.close();
      ToastSuccess(['','礼物池开启成功','礼物池关闭成功'][status]);
      getList();
    })
    .catch(() => {});
  }
  const handleReset = (row:any = {})=>{
    const { pool_name='', id=0 } = row
    ElMessageBox.confirm(`确定更新礼物池：${pool_name}吗?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(async () => {
      const loading = Toastloading();
      await luckDrawApi.wishLuckPoolReset({
        pool_id:id,
      });
      loading.close();
      ToastSuccess('更新成功');
      getList();
    })
    .catch(() => {});
  }
  const handlePoolForm = (row={})=>{
    poolFormRef.value.openDialog({
      ...row,
      pool_level:listQuery.pool_level,
      form_type:1, // 1普通池新增
    })
  }
  const handleConfig = (row:any={})=>{
    configFormRef.value.openDialog({
      ...row,
      poolTypeOptions
    })
  }
  const getList = async()=> {
    const loading = Toastloading()
    const res = await luckDrawApi.wishLuckPoolList(listQuery)
    loading.close()
    const { data=[] } = res
    action.list = data
  }
  let primarySet = false
  const getPoolLevel = async()=>{
    if(primarySet) return
    primarySet = true
    const { pool_level=0 } = $router().currentRoute.value?.meta || { pool_level:0 }
    if(listQuery.pool_level != pool_level && pool_level) {
      listQuery.pool_level = pool_level as number
      const loading = Toastloading()
      action.list = []
      listQuery.status = 0
      await getList()
      primarySet = false
      loading.close()
    }
  }
  const updatePoolLevel = ()=>{
    primarySet = false
    getPoolLevel()
  }
  onMounted(()=>{
    updatePoolLevel()
  })
  onUpdated(()=>{
    updatePoolLevel()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">礼物池状态：</div>
          <el-select v-model="listQuery.status" placeholder="请选择礼物池状态">
            <el-option label="全部状态" :value="0"/>
            <el-option
              v-for="(item, index) in poolTypeOptions"
              :key="index"
              :label="item.label"
              :value="item.type"
            />
          </el-select>
        </div>
        <!-- <div class="labelItem">
          <div class="label">礼物池类型：</div>
          <el-select v-model="listQuery.pool_type" placeholder="请选择礼物池状态">
            <el-option
              v-for="(item, index) in poolOptions"
              :key="index"
              :label="item.label"
              :value="item.type"
            />
          </el-select>
        </div> -->
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach">搜索</el-button>
          <el-button type="primary" @click="handlePoolForm()">新增礼物池</el-button>
        </div>
      </div>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border
    >
      <el-table-column width="80" prop="id" label="礼物池ID" />
      <el-table-column min-width="120" show-overflow-tooltip prop="pool_name" label="礼物池名称" />
      <el-table-column width="140" prop="image" label="参与区间">
        <template #default="scoped">
          {{ scoped.row.min_num }}-{{ scoped.row.max_num }}
        </template>
      </el-table-column>
      <el-table-column width="140" prop="status" label="礼物池状态">
        <template #default="scoped">
          <el-tag
            :type="['','success','warning'][scoped.row.status] || ''"
          >
            {{ poolTypeOptions.find(res=>res.type == scoped.row.status)?.label || scoped.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column width="180" prop="created_at" label="创建时间" />
      <el-table-column width="180" prop="updated_at" label="更新时间" />
      <el-table-column width="350" fixed="right" label="操作">
        <template #default="scoped">
          <el-row>
            <el-col :span="24">
              <el-button type="primary" @click="handlePoolForm(scoped.row)">编辑礼物池</el-button>
              <el-button type="primary" @click="handleReset(scoped.row)">更新礼物池</el-button>
            </el-col>
            <el-col :span="24" class="xm-mt10">
              <el-button type="primary" @click="handleConfig(scoped.row)">礼物池配置</el-button>
              <el-button type="primary" @click="inventoryRef.openDialog(scoped.row)">礼物池剩余数量</el-button>
              <el-button
              :type="['','warning','success'][scoped.row.status]"
              @click="handleClose(scoped.row)"
              >{{ ['','关闭礼物池','开启礼物池'][scoped.row.status] }}</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <poolForm ref="poolFormRef" @update-list="getList" />
    <configForm ref="configFormRef" />
    <inventory ref="inventoryRef" />
  </div>
</template>
